<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Form Elements - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        <link href="css/icomoon.css" rel="stylesheet" />
        
        <!-- other -->
        <link href="css/select2/select2-metro.css" rel="stylesheet" />
        <link href="css/datepicker/datepicker.css" rel="stylesheet" />
        <link href="css/timepicker/bootstrap-timepicker.css" rel="stylesheet" />
        <link href="css/datetimepicker/datetimepicker.css" rel="stylesheet" />
        <link href="css/daterangepicker/daterangepicker.css" rel="stylesheet" />
        <link href="css/colorpicker/bootstrap-colorpicker.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li class="active"><a href="form-elements.html">Elements</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!-- /nav -->
            </div><!-- /side left-->
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Actions <i class="aweso-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu black">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Some Action</a></li>
                                    <li><a href="#">Other Action</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button class="btn btn-link" data-content="widget"><i class="aweso-list-ul aweso-large" title="details view"></i></button>
                                <button class="btn btn-link" data-content="tile"><i class="aweso-th aweso-large" title="tile view"></i></button>
                            </div>
                        </li>
                        <li><button class="btn btn-link" data-toggle="button" data-content="toggle-pane"><i class="aweso-exchange aweso-large" title="toggle pane"></i></button></li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>Form elements</h1></div>

                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-inline">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">Form elements</li>
                    </ul>
                </header> <!--/ content header -->
                
                
                <!-- content page -->
                <article class="content-page">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- widget basic form-->
                            <div class="widget border-cyan" id="widget-form-basic">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Standard Style</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-form-basic" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal" />
                                        <div class="control-group">
                                            <label class="control-label" for="input">Input</label>
                                            <div class="controls">
                                                <input type="text" class="input-xxlarge" id="input" />
                                                <span class="help-inline">Inline help text</span>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputPass">Password Input</label>
                                            <div class="controls">
                                                <input type="password" class="input-xxlarge" id="inputPass" />
                                                <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputUpload">Upload</label>
                                            <div class="controls">
                                                <input type="file" id="inputUpload" />
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputSelect">Selects</label>
                                            <div class="controls">
                                                <select id="inputSelect">
                                                    <option />1
                                                    <option />2
                                                    <option />3
                                                    <option />4
                                                    <option />5
                                                </select>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputMultiple">Multiple</label>
                                            <div class="controls">
                                                <select id="inputMultiple" multiple="">
                                                    <option />1
                                                    <option />2
                                                    <option />3
                                                    <option />4
                                                    <option />5
                                                </select>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Checkboxes</label>
                                            <div class="controls">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="checkboxes" value="1" /> Option one is this and that
                                                </label>
                                                <label class="checkbox">
                                                    <input type="checkbox" name="checkboxes" value="2" /> Be sure to include why it's great
                                                </label>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Inline checkboxes</label>
                                            <div class="controls">
                                                <label class="checkbox inline">
                                                    <input type="checkbox" id="inlineCheckbox1" value="option1" /> @bent
                                                </label>
                                                <label class="checkbox inline">
                                                    <input type="checkbox" id="inlineCheckbox2" value="option2" /> @Iin
                                                </label>
                                                <label class="checkbox inline">
                                                    <input type="checkbox" id="inlineCheckbox3" value="option3" /> @stilearning
                                                </label>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Radios</label>
                                            <div class="controls">
                                                <label class="radio">
                                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="" />
                                                    Option one is this and that—be sure to include why it's great
                                                </label>
                                                <label class="radio">
                                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />
                                                    Option two can be something else and selecting it will deselect option one
                                                </label>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputTextarea">Textarea</label>
                                            <div class="controls">
                                                <textarea rows="3" class="input-xxlarge" id="inputTextarea"></textarea>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="form-actions bg-silver">
                                            <button type="submit" class="btn btn-primary">Save changes</button>
                                            <button type="button" class="btn">Cancel</button>
                                        </div><!-- /form-actions -->
                                    </form><!-- /form -->

                                </div><!-- /widget content -->
                            </div> <!-- /widget basic form -->


                            <!-- row -->
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- widget extending -->
                                    <div class="widget border-cyan" id="widget-extending">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-edit"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Extending Style</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-extending" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <form class="form-vertical" />
                                                <div class="control-group">
                                                    <label class="control-label" for="inputPrepand">Prepended input</label>
                                                    <div class="controls">
                                                        <div class="input-prepend">
                                                            <input class="input-xlarge" id="inputPrepand" type="text" placeholder="Username" />
                                                            <span class="add-on">@</span><!-- always place add-on after input element! because I'm place some effect on this element -->
                                                        </div>
                                                        <!-- with inline style-->
                                                        <div class="input-prepend input-prepend-inline">
                                                            <input class="input-xlarge" id="inputPrepand" type="text" placeholder="Username" />
                                                            <span class="add-on">@</span><!-- always place add-on after input element! because I'm place some effect on this element -->
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputAppended">Appended input</label>
                                                    <div class="controls">
                                                        <div class="input-append">
                                                            <input class="input-xlarge" id="inputAppended" type="text" />
                                                            <span class="add-on">.00</span>
                                                        </div>
                                                        <!-- with inline style-->
                                                        <div class="input-append input-append-inline">
                                                            <input class="input-xlarge" id="inputAppended" type="text" />
                                                            <span class="add-on">.00</span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputCombined">Combined</label>
                                                    <div class="controls">
                                                        <div class="input-prepend input-append">
                                                            <input class="input-xlarge" id="inputCombined" type="text" />
                                                            <span class="add-on">$</span>
                                                            <span class="add-on">.00</span>
                                                        </div>
                                                        <!-- with inline style-->
                                                        <div class="input-prepend input-append input-append-inline input-prepend-inline">
                                                            <input class="input-xlarge" type="text" />
                                                            <span class="add-on prepend">$</span>
                                                            <span class="add-on append">.00</span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputButton">Buttons instead</label>
                                                    <div class="controls">
                                                        <div class="input-prepend">
                                                            <button class="btn bg-cyan" type="button">Go!</button>
                                                            <input class="input-xlarge" id="inputButton" type="text" />
                                                        </div>
                                                        <div class="input-append">
                                                            <input class="input-xlarge" type="text" />
                                                            <button class="btn bg-cyan" type="button">Go!</button>
                                                        </div>
                                                        <!-- with inline style-->
                                                        <div class="input-prepend input-prepend-inline">
                                                            <button class="btn bg-cyan" type="button"><i class="icomo-arrow-right"></i></button>
                                                            <input class="input-xlarge" type="text" />
                                                        </div>
                                                        <div class="input-append input-append-inline">
                                                            <input class="input-xlarge" type="text" />
                                                            <button class="btn bg-cyan" type="button"><i class="icomo-arrow-right"></i></button>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputButton2">Buttons instead #2</label>
                                                    <div class="controls">
                                                        <div class="input-append">
                                                            <input class="input-xlarge" id="inputButton2" type="text" />
                                                            <button class="btn bg-cyan" type="button">Search</button>
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown" type="button">
                                                                    Options
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputDropdown">Buttons dropdown</label>
                                                    <div class="controls">
                                                        <div class="input-append">
                                                            <input class="input-xlarge" id="inputDropdown" type="text" />
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown">
                                                                    Action
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /append -->
                                                        <div class="input-prepend">
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown">
                                                                    Action
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                            <input class="input-xlarge" type="text" />
                                                        </div><!-- /prepend -->
                                                        <div class="input-prepend input-append">
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown">
                                                                    Action
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                            <input class="input-xlarge" id="appendedPrependedDropdownButton" type="text" />
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown">
                                                                    Action
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /combine -->
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputSegmented">Segmented dropdown</label>
                                                    <div class="controls">
                                                        <div class="input-prepend">
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan" tabindex="-1">Action</button>
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                            <input class="input-xlarge" type="text" id="inputSegmented" />
                                                        </div><!-- /prepend -->
                                                        <div class="input-append">
                                                            <input class="input-xlarge" type="text" />
                                                            <div class="btn-group">
                                                                <button class="btn bg-cyan" tabindex="-1">Action</button>
                                                                <button class="btn bg-cyan dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                                                    <i class="aweso-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu cyan">
                                                                    <li><a href="#">Action</a></li>
                                                                    <li><a href="#">Another action</a></li>
                                                                    <li><a href="#">Something else here</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /append -->
                                                    </div>
                                                </div><!-- /control-group -->

                                            </form>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget extending -->

                                </div><!-- /span left -->

                                <!-- span right -->
                                <div class="span6">
                                    <!-- widget states -->
                                    <div class="widget border-cyan" id="widget-states">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-edit"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Control states</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-states" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <form class="form-vertical" />
                                                <div class="control-group">
                                                    <label class="control-label" for="inputFocus">Focus input</label>
                                                    <div class="controls">
                                                        <input class="input-large" id="inputFocus" type="text" value="This is focused..." />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputInvalid">Invalid input</label>
                                                    <div class="controls">
                                                        <input class="input-large" id="inputInvalid" type="email" value="Email required..." required="" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Uneditable input</label>
                                                    <div class="controls">
                                                        <span class="input-large uneditable-input">Some value here</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="inputDisabled">Disabled input</label>
                                                    <div class="controls">
                                                        <input class="input-large" id="inputDisabled" type="text" placeholder="Disabled input here..." disabled="" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group warning">
                                                    <label class="control-label" for="inputWarning">Input warning</label>
                                                    <div class="controls">
                                                        <input class="input-large" type="text" id="inputWarning" />
                                                        <span class="help-inline">Warning message</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group error">
                                                    <label class="control-label" for="inputError">Input error</label>
                                                    <div class="controls">
                                                        <input class="input-large" type="text" id="inputError" />
                                                        <span class="help-inline">Error message</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group info">
                                                    <label class="control-label" for="inputInfo">Input info</label>
                                                    <div class="controls">
                                                        <input class="input-large" type="text" id="inputInfo" />
                                                        <span class="help-inline">Info message</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group success">
                                                    <label class="control-label" for="inputSuccess">Input success</label>
                                                    <div class="controls">
                                                        <input class="input-large" type="text" id="inputSuccess" />
                                                        <span class="help-inline">Success message!</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group warning">
                                                    <label class="control-label">Checkboxes & Radios</label>
                                                    <div class="controls">
                                                        <label class="checkbox inline">
                                                            <input type="checkbox" value="bent10" /> @bent
                                                        </label>
                                                        <label class="checkbox inline">
                                                            <input type="checkbox" value="Iin" /> @Iin
                                                        </label>
                                                        <label class="checkbox inline">
                                                            <input type="checkbox" value="stilearning" /> @stilearning
                                                        </label>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group error">
                                                    <label class="control-label">Radios</label>
                                                    <div class="controls">
                                                        <label class="radio">
                                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="" />
                                                            Option one is this and that
                                                        </label>
                                                        <label class="radio">
                                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />
                                                            Be sure to include why it's great
                                                        </label>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group info">
                                                    <label class="control-label" for="dropdownSuccess">Dropdown</label>
                                                    <div class="controls">
                                                        <select id="dropdownSuccess">
                                                            <option />- select one -
                                                            <option />2
                                                            <option />3
                                                            <option />4
                                                            <option />5
                                                        </select>
                                                        <span class="help-inline">Info message!</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group success">
                                                    <label class="control-label">Textarea</label>
                                                    <div class="controls">
                                                        <textarea rows="1" class="input-large"></textarea>
                                                        <span class="help-inline">Success message!</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </form>

                                        </div><!-- /widget content -->
                                    </div> <!-- /widget states -->

                                </div><!-- /span right -->
                            </div> <!-- /row -->



                            <!-- CUSTOM ELEMENTS
                            ================================================== -->
                            <h2 class="page-header">Custom Elements</h2>
                            <!-- INPUT FX
                            ================================================== -->
                            <!-- widget input fx -->
                            <div class="widget bg-cyan" id="widget-inputfx">
                                <!-- widget header -->
                                <div class="widget-header">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Input fx</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-inputfx" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal" />
                                        <div class="control-group">
                                            <label class="control-label" for="inputfx">Input</label>
                                            <div class="controls">
                                                <input type="text" class="input-fx input-xxlarge" id="inputfx" placeholder="Username" />
                                                <span class="help-inline">Inline help text</span>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputfxPass">Password Input</label>
                                            <div class="controls">
                                                <input type="password" class="input-fx input-xxlarge" id="inputfxPass" placeholder="********" />
                                                <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="inputfxTextarea">Textarea</label>
                                            <div class="controls">
                                                <textarea rows="3" class="input-fx input-xxlarge" id="inputfxTextarea" placeholder="Some text place here..."></textarea>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-success">Save changes</button>
                                            <button type="button" class="btn btn-inverse">Cancel</button>
                                        </div><!-- /form-actions -->
                                    </form><!-- /form -->
                                </div><!-- /widget content -->
                            </div> <!-- /widget input fx -->



                            <!-- CHECKBOX & RADIO
                            ================================================== -->
                            <!-- widget checkbox & radio -->
                            <div class="widget border-cyan" id="widget-checkbox">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Checkboxes and radios</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-checkbox" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <div class="control-group">
                                            <label class="control-label">Checkbox Squared</label>
                                            <div class="controls">
                                                <!-- block -->
                                                <div class="checkbox-squared help-block">
                                                    <input class="input-fx" type="checkbox" value="1" id="squared1" name="check-block" checked="" />
                                                    <label for="squared1">Option one is this and that</label>
                                                </div>
                                                <div class="checkbox-squared help-block">
                                                    <input class="input-fx" type="checkbox" value="2" id="squared2" name="check-block" />
                                                    <label for="squared2">Be sure to include why it's great</label>
                                                </div>
                                                <!-- inline -->
                                                <div class="checkbox-squared help-inline">
                                                    <input class="input-fx" type="checkbox" value="bent" id="squared3" name="check-inline" checked="" />
                                                    <label for="squared3">@bent</label>
                                                </div>
                                                <div class="checkbox-squared help-inline">
                                                    <input class="input-fx" type="checkbox" value="iin" id="squared4" name="check-inline" />
                                                    <label for="squared4">@Iin</label>
                                                </div>
                                                <div class="checkbox-squared help-inline">
                                                    <input class="input-fx" type="checkbox" value="stilearning" id="squared5" name="check-inline" />
                                                    <label for="squared5">@Stilearning</label>
                                                </div>
                                                <div class="help-block color-red">Required icomoon.css</div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Checkbox Rounded</label>
                                            <div class="controls">
                                                <!-- block, also support inline -->
                                                <div class="checkbox-rounded help-block">
                                                    <input class="input-fx" type="checkbox" value="1" id="rounded1" name="check-rounded" checked="" />
                                                    <label for="rounded1">Option one is this and that</label>
                                                </div>
                                                <div class="checkbox-rounded help-block">
                                                    <input class="input-fx" type="checkbox" value="2" id="rounded2" name="check-rounded" />
                                                    <label for="rounded2">Be sure to include why it's great</label>
                                                </div>
                                                <div class="help-block color-red">Required icomoon.css</div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Checkbox Slide</label>
                                            <div class="controls">
                                                <!-- block, also support inline -->
                                                <div class="checkbox-slide bg-silver help-block">
                                                    <input class="input-fx" type="checkbox" value="1" id="slide1" name="check-rounded-block" checked="" />
                                                    <label for="slide1"></label>
                                                </div>
                                                <div class="checkbox-slide bg-silver help-block">
                                                    <input class="input-fx" type="checkbox" value="2" id="slide2" name="check-rounded-block" />
                                                    <label for="slide2"></label>
                                                </div>

                                                <!-- inline & themes-->
                                                <p class="help-block">Available on 20+ colors</p>
                                                <div class="checkbox-slide">
                                                    <input class="input-fx" type="checkbox" value="1" id="slide3" name="check-rounded" />
                                                    <label for="slide3"></label>
                                                </div>
                                                <div class="checkbox-slide bg-amber">
                                                    <input class="input-fx" type="checkbox" value="2" id="slide4" name="check-rounded" />
                                                    <label for="slide4"></label>
                                                </div>
                                                <div class="checkbox-slide bg-crimson">
                                                    <input class="input-fx" type="checkbox" value="3" id="slide5" name="check-rounded" />
                                                    <label for="slide5"></label>
                                                </div>
                                                <div class="checkbox-slide bg-yellow">
                                                    <input class="input-fx" type="checkbox" value="4" id="slide6" name="check-rounded" />
                                                    <label for="slide6"></label>
                                                </div>
                                                <div class="checkbox-slide bg-teal">
                                                    <input class="input-fx" type="checkbox" value="5" id="slide7" name="check-rounded" />
                                                    <label for="slide7"></label>
                                                </div>
                                                <div class="checkbox-slide bg-magenta">
                                                    <input class="input-fx" type="checkbox" value="6" id="slide8" name="check-rounded" />
                                                    <label for="slide8"></label>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Checkbox Slide #2</label>
                                            <div class="controls">
                                                <!-- block, also support inline -->
                                                <div class="checkbox-slide checkbox-slidetext bg-silver help-block">
                                                    <input class="input-fx" type="checkbox" value="1" id="slidetext1" name="check-slidetext-block" checked="" />
                                                    <label for="slidetext1"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-silver help-block">
                                                    <input class="input-fx" type="checkbox" value="2" id="slidetext2" name="check-slidetext-block" />
                                                    <label for="slidetext2"></label>
                                                </div>

                                                <!-- inline & themes-->
                                                <div class="checkbox-slide checkbox-slidetext">
                                                    <input class="input-fx" type="checkbox" value="1" id="slidetext3" name="check-slidetext" checked="" />
                                                    <label for="slidetext3"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-orange">
                                                    <input class="input-fx" type="checkbox" value="2" id="slidetext4" name="check-slidetext" />
                                                    <label for="slidetext4"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-mauve">
                                                    <input class="input-fx" type="checkbox" value="3" id="slidetext5" name="check-slidetext" />
                                                    <label for="slidetext5"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-emerald">
                                                    <input class="input-fx" type="checkbox" value="4" id="slidetext6" name="check-slidetext" />
                                                    <label for="slidetext6"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-steel">
                                                    <input class="input-fx" type="checkbox" value="5" id="slidetext7" name="check-slidetext" />
                                                    <label for="slidetext7"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-lime">
                                                    <input class="input-fx" type="checkbox" value="6" id="slidetext8" name="check-slidetext" />
                                                    <label for="slidetext8"></label>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Radio Squared</label>
                                            <div class="controls">
                                                <!-- block -->
                                                <div class="checkbox-squared help-block">
                                                    <input class="input-fx" type="radio" value="1" id="radio-squared1" name="radio-block" checked="" />
                                                    <label for="radio-squared1">Option one is this and that</label>
                                                </div>
                                                <div class="checkbox-squared help-block">
                                                    <input class="input-fx" type="radio" value="2" id="radio-squared2" name="radio-block" />
                                                    <label for="radio-squared2">Be sure to include why it's great</label>
                                                </div>
                                                <!-- inline -->
                                                <div class="checkbox-squared help-inline">
                                                    <input class="input-fx" type="radio" value="bent" id="radio-squared3" name="radio-inline" checked="" />
                                                    <label for="radio-squared3">@bent</label>
                                                </div>
                                                <div class="checkbox-squared help-inline">
                                                    <input class="input-fx" type="radio" value="iin" id="radio-squared4" name="radio-inline" />
                                                    <label for="radio-squared4">@Iin</label>
                                                </div>
                                                <div class="checkbox-squared help-inline">
                                                    <input class="input-fx" type="radio" value="stilearning" id="radio-squared5" name="radio-inline" />
                                                    <label for="radio-squared5">@Stilearning</label>
                                                </div>
                                                <div class="help-block color-red">Required icomoon.css</div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Radio Rounded</label>
                                            <div class="controls">
                                                <!-- block, also support inline -->
                                                <div class="checkbox-rounded help-block">
                                                    <input class="input-fx" type="radio" value="1" id="radio-rounded1" name="radio-rounded" checked="" />
                                                    <label for="radio-rounded1">Option one is this and that</label>
                                                </div>
                                                <div class="checkbox-rounded help-block">
                                                    <input class="input-fx" type="radio" value="2" id="radio-rounded2" name="radio-rounded" />
                                                    <label for="radio-rounded2">Be sure to include why it's great</label>
                                                </div>
                                                <div class="help-block color-red">Required icomoon.css</div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Radio Slide</label>
                                            <div class="controls">
                                                <!-- block, also support inline -->
                                                <div class="checkbox-slide bg-silver">
                                                    <input class="input-fx" type="radio" value="1" id="radio-slide1" name="radio-rounded-block" checked="" />
                                                    <label for="radio-slide1"></label>
                                                </div>
                                                <div class="checkbox-slide bg-silver">
                                                    <input class="input-fx" type="radio" value="2" id="radio-slide2" name="radio-rounded-block" />
                                                    <label for="radio-slide2"></label>
                                                </div>
                                                <div class="checkbox-slide bg-silver">
                                                    <input class="input-fx" type="radio" value="3" id="radio-slide3" name="radio-rounded-block" />
                                                    <label for="radio-slide3"></label>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Radio Slide #2</label>
                                            <div class="controls">
                                                <!-- block, also support inline -->
                                                <div class="checkbox-slide checkbox-slidetext bg-silver">
                                                    <input class="input-fx" type="radio" value="1" id="radio-slidetext1" name="radio-slidetext-block" checked="" />
                                                    <label for="radio-slidetext1"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-silver">
                                                    <input class="input-fx" type="radio" value="2" id="radio-slidetext2" name="radio-slidetext-block" />
                                                    <label for="radio-slidetext2"></label>
                                                </div>
                                                <div class="checkbox-slide checkbox-slidetext bg-silver">
                                                    <input class="input-fx" type="radio" value="3" id="radio-slidetext3" name="radio-slidetext-block" />
                                                    <label for="radio-slidetext3"></label>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                    </form><!-- /form -->

                                </div><!-- /widget content -->
                            </div> <!-- /widget checkbox & radio -->



                            <!-- SELECT2
                            ================================================== -->
                            <!-- widget select2 -->
                            <div class="widget border-cyan" id="widget-select2">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Select2</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-select2" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal" />
                                        <div class="control-group">
                                            <label class="control-label" for="select2-basic">Basics</label>
                                            <div class="controls">
                                                <select class="input-xlarge" data-fx="select2" id="select2-basic">
                                                    <optgroup label="Alaskan/Hawaiian Time Zone">
                                                        <option value="AK" />Alaska
                                                        <option value="HI" />Hawaii
                                                    </optgroup>
                                                    <optgroup label="Pacific Time Zone">
                                                        <option value="CA" />California
                                                        <option value="NV" />Nevada
                                                        <option value="OR" />Oregon
                                                        <option value="WA" />Washington
                                                    </optgroup>
                                                    <optgroup label="Mountain Time Zone">
                                                        <option value="AZ" />Arizona
                                                        <option value="CO" />Colorado
                                                        <option value="ID" />Idaho
                                                        <option value="MT" />Montana<option value="NE" />Nebraska
                                                        <option value="NM" />New Mexico
                                                        <option value="ND" />North Dakota
                                                        <option value="UT" />Utah
                                                        <option value="WY" />Wyoming
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="select2-multiple">Multiple</label>
                                            <div class="controls">
                                                <select class="input-xlarge" data-fx="select2" id="select2-multiple" multiple="">
                                                    <optgroup label="Alaskan/Hawaiian Time Zone">
                                                        <option value="AK" />Alaska
                                                        <option value="HI" />Hawaii
                                                    </optgroup>
                                                    <optgroup label="Pacific Time Zone">
                                                        <option value="CA" />California
                                                        <option value="NV" />Nevada
                                                        <option value="OR" />Oregon
                                                        <option value="WA" />Washington
                                                    </optgroup>
                                                    <optgroup label="Mountain Time Zone">
                                                        <option value="AZ" />Arizona
                                                        <option value="CO" />Colorado
                                                        <option value="ID" />Idaho
                                                        <option value="MT" />Montana<option value="NE" />Nebraska
                                                        <option value="NM" />New Mexico
                                                        <option value="ND" />North Dakota
                                                        <option value="UT" />Utah
                                                        <option value="WY" />Wyoming
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="select2-minin">Minimum Input</label>
                                            <div class="controls">
                                                <select class="input-xlarge" data-fx="select2" id="select2-minin" data-min-input="2">
                                                    <optgroup label="Alaskan/Hawaiian Time Zone">
                                                        <option value="AK" />Alaska
                                                        <option value="HI" />Hawaii
                                                    </optgroup>
                                                    <optgroup label="Pacific Time Zone">
                                                        <option value="CA" />California
                                                        <option value="NV" />Nevada
                                                        <option value="OR" />Oregon
                                                        <option value="WA" />Washington
                                                    </optgroup>
                                                    <optgroup label="Mountain Time Zone">
                                                        <option value="AZ" />Arizona
                                                        <option value="CO" />Colorado
                                                        <option value="ID" />Idaho
                                                        <option value="MT" />Montana<option value="NE" />Nebraska
                                                        <option value="NM" />New Mexico
                                                        <option value="ND" />North Dakota
                                                        <option value="UT" />Utah
                                                        <option value="WY" />Wyoming
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="select2-tagging">Tagging Support</label>
                                            <div class="controls">
                                                <input type="hidden" class="input-xlarge" data-fx="select2-tags" id="select2-tagging" value="metro, @bent, @Iin" />
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Drag and Drop Sorting</label>
                                            <div class="controls">
                                                <input type="hidden" class="input-xlarge" id="select2-dragdrop" value="red, green, blue, black, white" />
                                                <div class="help-block" id="select2-dragdrop-val"></div>
                                            </div>
                                        </div><!-- /control-group -->
                                    </form>

                                </div><!-- /widget content -->
                            </div> <!-- /widget select2 -->



                            <!-- FILE UPLOAD
                            ================================================== -->
                            <!-- widget file upload -->
                            <div class="widget border-cyan" id="widget-upload">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">File Upload</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-upload" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" method="post" enctype="multipart/form-data" />
                                        <div class="control-group">
                                            <label class="control-label" for="file-upload">File upload #1</label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input input-large">
                                                            <i class="icon-file fileupload-exists"></i> 
                                                            <span class="fileupload-preview"></span>
                                                        </div>
                                                        <span class="btn btn-primary btn-file">
                                                            <span class="fileupload-new">Select file</span>
                                                            <span class="fileupload-exists">Change</span>
                                                            <input name="fileupload" type="file" id="file-upload" />
                                                        </span>
                                                        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                    </div>
                                                </div><!-- /fileupload -->
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input input-large">
                                                            <i class="icon-file fileupload-exists"></i> 
                                                            <span class="fileupload-preview"></span>
                                                        </div>
                                                        <span class="btn btn-info btn-file">
                                                            <span class="fileupload-new">Select file</span>
                                                            <span class="fileupload-exists">Change</span>
                                                            <input name="fileupload-2" type="file" id="file-upload" />
                                                        </span>
                                                        <a href="#" class="btn btn-warning fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                    </div>
                                                </div><!-- /fileupload -->
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input input-large">
                                                            <i class="icon-file fileupload-exists"></i> 
                                                            <span class="fileupload-preview"></span>
                                                        </div>
                                                        <span class="btn btn-danger btn-file">
                                                            <span class="fileupload-new">Select file</span>
                                                            <span class="fileupload-exists">Change</span>
                                                            <input name="fileupload-3" type="file" id="file-upload" />
                                                        </span>
                                                        <a href="#" class="btn btn-inverse fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                    </div>
                                                </div><!-- /fileupload -->
                                            </div>
                                        </div><!-- /control-group -->
                                        
                                        <div class="control-group">
                                            <label class="control-label" for="file-upload2">File upload #2</label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <span class="btn bg-amber btn-file bordered">
                                                        <span class="fileupload-new">Select file</span>
                                                        <span class="fileupload-exists">Change</span>
                                                        <input name="fileupload2-1" type="file" id="file-upload2" />
                                                    </span>
                                                    <span class="fileupload-preview"></span>
                                                    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none"><i class="icomo-remove-2"></i></a>
                                                </div><!-- /fileupload -->
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <span class="btn bg-brown btn-file bordered">
                                                        <span class="fileupload-new">Select file</span>
                                                        <span class="fileupload-exists">Change</span>
                                                        <input name="fileupload2-2" type="file" id="file-upload2" />
                                                    </span>
                                                    <span class="fileupload-preview"></span>
                                                    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none"><i class="icomo-remove-2"></i></a>
                                                </div><!-- /fileupload -->
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <span class="btn bg-mauve btn-file bordered">
                                                        <span class="fileupload-new">Select file</span>
                                                        <span class="fileupload-exists">Change</span>
                                                        <input name="fileupload2-3" type="file" id="file-upload2" />
                                                    </span>
                                                    <span class="fileupload-preview"></span>
                                                    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none"><i class="icomo-remove-2"></i></a>
                                                </div><!-- /fileupload -->
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <span class="btn bg-cyan btn-file bordered">
                                                        <span class="fileupload-new">Select file</span>
                                                        <span class="fileupload-exists">Change</span>
                                                        <input name="fileupload2-4" type="file" id="file-upload2" />
                                                    </span>
                                                    <span class="fileupload-preview"></span>
                                                    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none"><i class="icomo-remove-2"></i></a>
                                                </div><!-- /fileupload -->
                                            </div>
                                        </div><!-- /control-group -->
                                        
                                        <div class="control-group">
                                            <label class="control-label" for="file-upload3">Image Preview</label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;">
                                                        <img src="holder.js/200x150/social/text:no image" />
                                                    </div>
                                                    <div>
                                                        <span class="btn btn-success btn-file">
                                                            <span class="fileupload-new">Select image</span>
                                                            <span class="fileupload-exists">Change</span>
                                                            <input name="fileupload3" type="file" id="file-upload3" />
                                                        </span>
                                                        <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                    </div>
                                                </div><!-- /fileupload -->
                                            </div>
                                        </div><!-- /control-group -->
                                    </form>

                                    <p class="well bg-yellow">
                                        <strong>Notice!</strong> Image preview only works in IE10+, FF3.6+, Chrome6.0+ and Opera11.1+. In older browsers and Safari, the filename is shown instead
                                    </p>
                                </div><!-- /widget content -->
                            </div> <!-- /widget file upload -->



                            <!-- MASKED INPUT
                            ================================================== -->
                            <!-- widget masked input -->
                            <div class="widget border-cyan" data-collapse="true" id="widget-masked">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Masked Input</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-masked" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <!-- row -->
                                        <div class="row-fluid">
                                            <!-- span left -->
                                            <div class="span6">
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-numeric">Decimal</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-numeric" data-fx="masked" data-inputmask="'alias': 'decimal'" />
                                                        <span class="help-block">999,99</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-numeric2">Grouping Decimal</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-numeric2" data-fx="masked" data-inputmask="'alias': 'non-negative-decimal', 'radixPoint': ',', 'autoGroup': true, 'groupSeparator': '.', 'groupSize': 3" />
                                                        <span class="help-block">9.999.999</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-numeric3">Integer</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-numeric3" data-fx="masked" data-inputmask="'alias': 'integer'" />
                                                        <span class="help-block">99999</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-numeric4">IP</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-numeric4" data-fx="masked" data-inputmask="'alias': 'ip'" />
                                                        <span class="help-block">192.168.010.254</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-date">Date</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-date" data-fx="masked" data-inputmask="'alias': 'date'" />
                                                        <span class="help-block">30/12/1989</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-date2">Date #2</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-date2" data-fx="masked" data-inputmask="'alias': 'mm/dd/yyyy'" />
                                                        <span class="help-block">12/30/1989</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-datetime">Datetime</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-datetime" data-fx="masked" data-inputmask="'alias': 'datetime'" />
                                                        <span class="help-block">30/12/1989 00:16</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-datetime2">Datetime #2</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-datetime2" data-fx="masked" data-inputmask="'alias': 'datetime12'" />
                                                        <span class="help-block">30/12/1989 12:16 am</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /span left -->

                                            <!-- span right -->
                                            <div class="span6">
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-phone">Phone</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-phone" data-fx="masked" data-inputmask="'mask': '(999) 999-9999'" />
                                                        <span class="help-block">(999) 999-9999</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-tax">Tax ID</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-tax" data-fx="masked" data-inputmask="'mask': '99-9999999'" />
                                                        <span class="help-block">99-9999999</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-ssn">SSN</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-ssn" data-fx="masked" data-inputmask="'mask': '999-99-9999'" />
                                                        <span class="help-block">999-99-9999</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-pkey">Product Key</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-pkey" data-fx="masked" data-inputmask="'mask': 'AA99-99AA-99AA-AA99'" />
                                                        <span class="help-block">AA99-99AA-99AA-AA99</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="masked-tooltip">With tooltip</label>
                                                    <div class="controls">
                                                        <input type="text" class="input-block-level" id="masked-tooltip" data-fx="masked" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999'], 'showTooltip': true" />
                                                        <span class="help-block">tooltip</span>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /span right -->

                                        </div><!-- /row -->
                                    </form><!-- /form -->

                                </div><!-- /widget content -->
                            </div> <!-- /widget masket input -->




                            <!-- DATE PICKER
                            ================================================== -->
                            <!-- widget datepicker -->
                            <div class="widget border-cyan" id="widget-datepicker">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Date Picker</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-datepicker" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <div class="control-group">
                                            <label class="control-label" for="datepicker">Datepicker #1</label>
                                            <div class="controls">
                                                <input type="text" value="06-16-2013" data-fx="datepicker" id="datepicker" />
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datepicker2">Datepicker #2</label>
                                            <div class="controls">
                                                <input type="text" value="06/16/13" data-date-format="mm/dd/yy" data-fx="datepicker" id="datepicker2" />
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datepicker3">As Component</label>
                                            <div class="controls">
                                                <div class="input-prepend input-prepend-inline date" data-fx="datepicker" id="datepicker3" data-date="12-06-2013" data-date-format="dd-mm-yyyy">
                                                    <input class="input-medium" type="text" value="12-06-2013" readonly="" />
                                                    <span class="add-on"><i class="icomo-calendar-3"></i></span>
                                                </div>
                                                <br /><br />
                                                <div class="input-append input-append-inline date" data-fx="datepicker" id="datepicker3" data-date="12-06-2013" data-date-format="dd-mm-yyyy">
                                                    <input class="input-medium" type="text" value="12-06-2013" readonly="" />
                                                    <span class="add-on"><i class="icomo-calendar-3"></i></span>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datepicker4">Datepicker inline</label>
                                            <div class="controls">
                                                <div data-fx="datepicker" id="datepicker4"></div>
                                            </div>
                                        </div><!-- /control-group -->
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- / widget datepicker -->




                            <!-- DATE RANGE PICKER
                            ================================================== -->
                            <!-- widget date range picker -->
                            <div class="widget border-cyan" id="widget-daterangepicker">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Date Range Picker</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-daterangepicker" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <div class="control-group">
                                            <label class="control-label" for="daterangepicker">Simple</label>
                                            <div class="controls">
                                                <div class="input-prepend">
                                                    <input type="text" class="input-large" id="daterangepicker" value="03/18/2013 - 03/23/2013" />
                                                    <span class="add-on"><i class="icomo-calendar-3 color-black"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label">Options Usage</label>
                                            <div class="controls">
                                                <div id="reportrange" class="pull-right">
                                                    <span class="btn"><i class="icomo-calendar-2"></i> <span></span> <b class="caret"></b></span> 
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="daterangepicker2">Month/Year Dropdowns</label>
                                            <div class="controls">
                                                <div class="input-prepend input-prepend-inline">
                                                    <input type="text" class="input-large" id="daterangepicker2" />
                                                    <span class="add-on"><i class="icomo-calendar"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="daterangepicker3">Range Limit</label>
                                            <div class="controls">
                                                <div class="input-append input-append-inline">
                                                    <input type="text" class="input-large" id="daterangepicker3" value="03/18/2013 - 03/21/2013" />
                                                    <span class="add-on"><i class="icomo-calendar"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- / widget date range picker -->




                            <!-- TIME PICKER
                            ================================================== -->
                            <!-- widget timepicker -->
                            <div class="widget border-cyan" id="widget-timepicker">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Time Picker</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-timepicker" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <div class="control-group">
                                            <label class="control-label" for="timepicker">Timepicker #1</label>
                                            <div class="controls">
                                                <div class="input-append bootstrap-timepicker">
                                                    <input data-fx="timepicker" id="timepicker" type="text" class="input-small" />
                                                    <span class="add-on"><i class="icomo-stopwatch"></i></span>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="timepicker2">Without component</label>
                                            <div class="controls">
                                                <div class="bootstrap-timepicker">
                                                    <input data-fx="timepicker" data-minute-step="5" data-show-inputs="false" data-disable-focus="true" id="timepicker2" type="text" class="input-small" />
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="timepicker3">Without a template</label>
                                            <div class="controls">
                                                <div class="bootstrap-timepicker">
                                                    <input data-fx="timepicker" data-template="false" data-show-inputs="false" id="timepicker3" type="text" class="input-small" />
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="timepicker4">Modal & 24hr</label>
                                            <div class="controls">
                                                <div class="input-append bootstrap-timepicker">
                                                    <input data-fx="timepicker" data-template="modal" data-show-meridian="false" data-show-seconds="true" id="timepicker4" type="text" class="input-small" />
                                                    <span class="add-on"><i class="icomo-stopwatch"></i></span>
                                                </div>
                                            </div>
                                        </div><!-- /control-group -->
                                    </form>

                                </div><!-- /widget content -->
                            </div> <!-- / widget timepicker -->




                            <!-- DATE TIME PICKER
                            ================================================== -->
                            <!-- widget datetimepicker -->
                            <div class="widget border-cyan" id="widget-datetimepicker">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">DateTime Picker</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-datetimepicker" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <div class="control-group">
                                            <label class="control-label" for="datetimepicker">Input</label>
                                            <div class="controls">
                                                <input data-fx="datetimepicker" type="text" data-date-format="yyyy-mm-dd hh:ii" class="input-large" id="datetimepicker" />
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datetimepicker2">Component</label>
                                            <div class="controls">
                                                <div class="input-prepend input-prepend-inline date" data-fx="datetimepicker" data-date-format="dd MM yyyy - hh:ii">
                                                    <input type="text" class="input-large" id="datetimepicker2" readonly="" />
                                                    <span class="add-on"><i class="icomo-calendar"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datetimepicker3">Positionning</label>
                                            <div class="controls">
                                                <div class="input-append input-append-inline date" data-fx="datetimepicker" data-date-format="dd MM yyyy - hh:ii" data-picker-position="bottom-left">
                                                    <input type="text" class="input-large" id="datetimepicker3" readonly="" />
                                                    <span class="add-on"><i class="icomo-calendar"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datetimepicker4">Advanced</label>
                                            <div class="controls">
                                                <div class="input-append date" data-fx="datetimepicker" data-date-format="dd MM yyyy - hh:ii" data-picker-position="bottom-left">
                                                    <input type="text" class="input-large" id="datetimepicker4" readonly="" />
                                                    <span class="add-on"><i class="aweso-remove"></i></span>
                                                    <span class="add-on"><i class="aweso-calendar-empty"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datetimepicker5">Mirror field</label>
                                            <div class="controls">
                                                <div><input type="text" class="input-large" id="mirror_field" value="" readonly="" /></div>
                                                <div class="input-append date" data-fx="datetimepicker" data-link-field="mirror_field" data-date-format="dd MM yyyy - hh:ii" data-picker-position="bottom-left">
                                                    <input type="text" class="input-large" id="datetimepicker5" readonly="" />
                                                    <span class="add-on"><i class="aweso-remove"></i></span>
                                                    <span class="add-on"><i class="aweso-calendar-empty"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="datetimepicker5">Meridian format</label>
                                            <div class="controls">
                                                <div class="input-append date" data-fx="datetimepicker" data-show-meridian="true" data-date-format="dd MM yyyy - hh:ii" data-picker-position="bottom-left">
                                                    <input type="text" class="input-large" id="datetimepicker5" readonly="" />
                                                    <span class="add-on"><i class="aweso-remove"></i></span>
                                                    <span class="add-on"><i class="aweso-calendar-empty"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                    </form>

                                </div><!-- /widget content -->
                            </div> <!-- / widget datetimepicker -->



                            <!-- COLOR PICKER
                            ================================================== -->
                            <!-- widget colorpicker -->
                            <div class="widget border-cyan" id="widget-colorpicker">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Colorpicker</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-colorpicker" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" />
                                        <div class="control-group">
                                            <label class="control-label" for="colorpicker">Basic</label>
                                            <div class="controls">
                                                <input type="text" class="input-large" data-fx="colorpicker" value="#FA6800" id="colorpicker" />
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="colorpicker2">RGBA</label>
                                            <div class="controls">
                                                <input type="text" class="input-large" data-fx="colorpicker" value="rgba(0, 194, 255, 0.78)" data-color-format="rgba" id="colorpicker2" />
                                            </div>
                                        </div> <!-- control-group -->
                                        <div class="control-group">
                                            <label class="control-label" for="colorpicker3">As component</label>
                                            <div class="controls">
                                                <div class="input-append input-append-inline color" data-fx="colorpicker" data-color="rgb(216, 0, 115)" data-color-format="rgb">
                                                    <input type="text" class="input-large" value="" id="colorpicker3" readonly="" />
                                                    <span class="add-on"><i style="width: 26px; height: 26px; margin-right: -3px; background-color: rgb(216, 0, 115)"></i></span>
                                                </div>
                                            </div>
                                        </div> <!-- control-group -->
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /widget colorpicker -->


                        </div><!-- /content-inner-->
                    </div><!-- /main-page-->

                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        
        <!-- apps component js, optional -->
        <script type="text/javascript" src="js/select2/select2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js"></script>
        <script type="text/javascript" src="js/inputmask/jquery.inputmask.bundle.min.js"></script>
        <script type="text/javascript" src="js/datepicker/bootstrap-datepicker.js"></script>
        <script type="text/javascript" src="js/timepicker/bootstrap-timepicker.min.js"></script>
        <script type="text/javascript" src="js/datetimepicker/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript" src="js/daterangepicker/moment.min.js"></script>
        <script type="text/javascript" src="js/daterangepicker/daterangepicker.js"></script>
        <script type="text/javascript" src="js/colorpicker/bootstrap-colorpicker.js"></script>
        
        <!-- metro js, required! -->
        <script type="text/javascript" src="js/metro-base.js"></script>
        
        <!-- demo js -->
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript" src="js/demo/form-elements.js"></script>
    </body>
</html>
